<template>
	<view class="page">
		<view class="container">
			<view class="aaa">
				<uni-datetime-picker style="position: absolute;top: -100vh" ref="timePicker" type="date" v-model="chooseDate111" @change="chooseDate" :clear-icon="false" />
				<uni-icons type="calendar" size="30" color="#fff" @click="choseT"></uni-icons>

			</view>
			<view class="bbb">
				<view>{{this.range.beginDate}}</view>
				<view>至</view>
				<view>{{this.range.endDate}}</view>
			</view>
			<view style="width: 40px;"></view>
		</view>
		
		<view>
			<table style="table-layout: fixed; width: 100%;border-spacing: 0;font-size: 14px;">
				<thead style="color: #fff;background-color: #138bec;position:sticky;top:44px;" >
					<tr>
						<th style="border:1px solid #138bec;padding-bottom: 10px;">
							<div>时间</div>
						</th>
						<th v-for="(item,index) in weekDay"
							style="border:1px solid #138bec;padding-bottom: 10px;">
							<div style="text-align: center;">{{dayList[index]}}</div>
							<div style="text-align: center;">{{item}}</div>
						</th>
					</tr>
				</thead>
				<tbody style="background-color: #f8f8f8;">
					<tr v-for="(item,index) in dataList.claTimeContainer" style="height: 110px;">
						<td class="tableBoder" style="text-align: center;background-color: #fff;">
							<view style="font-weight: 800;font-size: 16px;">{{index+1}}</view>{{item.time}}
						</td>
						<td v-for="(itemaa,indexaa) in item.claTimeWeekDayMap" class="tableBoder">
							<view v-if="itemaa.length>0"
								:style="{backgroundColor: getRandomColor(),color: '#fff',borderRadius: '5px',padding: '2px'}"
								@click="pageTo(itemaa[0])">
								<view>
									{{itemaa[0].courseName}}<br />({{itemaa[0].roomName}})
								</view>
							</view>
						</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	import { getWeekClassApi } from '@/common/api/course'
	export default {
		data() {
			return {
				colorList: ['#6cc7f6', '#e85572', '#aa77f0', '#72d9bb', '#f3be54', '#e27850'],
				weekDay: ['一', '二', '三', '四', '五', '六', '日'],
				range: {
					beginDate: null,
					endDate: null
				},
				dayList: [],
				dataList: {},
				address: null,
				chooseDate111: null,
				tabInfo: {},
				id: null,
				range: ['2021-02-1', '2021-3-28'],
			}
		},
		computed: {
		},
		mounted() {
		},
		onLoad() {
			this.getClassData(new Date())
		},
		methods: {
			choseT() {
				this.$refs.timePicker.show()
			},
			getClassData(date) {
				const today = date
				const todayNum = today.getDay()
				const diff = todayNum === 0 ? -6 : 1 - todayNum

				const monday = new Date(today)
				monday.setDate(today.getDate() + diff)

				const sunday = new Date(monday)
				sunday.setDate(monday.getDate() + 6)

				console.log('onload', monday.toISOString().split('T')[0], sunday.toISOString().split('T')[0])
				this.range = {
					beginDate: monday.toISOString().split('T')[0],
					endDate: sunday.toISOString().split('T')[0]
				}
				this.chooseDate111 = this.range.beginDate
				this.dayRange(this.range)
				console.log('eee', this.range)
					getWeekClassApi({
						...this.range,
					}).then((res) => {
						console.log('res', res)
						this.dataList = res.data
					})
			},
			chooseDate(e) {
				console.log(this.chooseDate111)
				this.getClassData(new Date(e))
			},
			dayRange(date) {
				let days = []
				let currentDate = new Date(date.beginDate)
				let endDate = new Date(date.endDate)
				while (currentDate <= endDate) {
					days.push(new Date(currentDate).getDate())
					currentDate.setDate(currentDate.getDate() + 1)
				}
				this.dayList = days
			},
			pageTo(item) {
				console.log(item, 'item')
				uni.navigateTo({
					url: `/pages/lesson/detail?item=` + JSON.stringify(item)
				})
			},
			getRandomColor() {
				const randomIndex = Math.floor(Math.random() * this.colorList.length)
				return this.colorList[randomIndex]
			},
		}
	}
</script>

<style lang="less">
	.page {
		width: 100vw;
		height:auto;
		
		font-size: 10px;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.container {
		width: 100%;
		height: 30px;
		background-color: #138bec;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
	}
	
	.aaa {
		width: 40px;		
		overflow: hidden;
		position: relative;
		text-align: center;
	}
	
	.bbb {
		flex-grow: 1;
		
		font-size: 14px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	
	.tableBoder {
		border: 1px solid #ededed;
	}
	.thead {
		position: fixed;
		top: 0;
	}
</style>
<style>
	.uni-date__x-input {
		display: none;
	}
</style>